<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">
    <script src="./index.js"></script>
    
    </head>
    s
    <body>
    <section class="recipe-card">
    <div class="row">
    <div class="col-lg-4 col-md-12 col-sm-12">
    <div class="recipe-img">
    <img src="https://assets.codepen.io/652/shania-pinnata-7E-vKgzahd8-unsplash.jpg" alt="spaghetti with pesto sauce and cherry tomatoes." class="img-fluid">
    </div>
    <div class="recipe_details">
    <ul>
    <li><img src="https://i.postimg.cc/mD47Y7rJ/serving.png">Servings: <span>4</span></li>
    <li><img src="https://i.postimg.cc/pXVptRrw/meal.png">Prep Time: <span>5 minutes</span></li>
    <li><img src="https://i.postimg.cc/pLX8kKKn/food-1.png">Cook Time: <span>25 minutes</span></li>
    <li><img src="https://i.postimg.cc/CxFCt3p5/cooking.png">Total Time: <span>30 minutes</span></li>
    </ul>
    </div>
    </div>
    <div class="col-lg-8 col-md-12 col-sm-12">
    <div class="recipe-description">
    <h2>Pasta with Pesto and Tomatoes</h2>
    <p>This quick and delicious pasta dish is the perfect way to use up a summer bounty of basil and tomatoes! Don't have a green thumb? Never fear! You can knock out this classic pasta dish in no time with a jar of prepared pesto sauce. </p>
    </div>
    <div class="recipe_process">
    <div class="tab">
    <button class="tablinks" onclick="openFood(event, 'ingredients')" id="defaultOpen">Ingredients</button>
    <button class="tablinks" onclick="openFood(event, 'instructions')">Process</button>
    </div>
    
    <div id="ingredients" class="tabcontent">
    <h2>The Ingredients</h2>
    <ul class="ingredients">
    <li>8 oz. spaghetti or linguine pasta</li>
    <li>2 cups fresh basil leaves, plus 4-8 reserved leaves for garnish</li>
    <li>2 cloves garlic</li>
    <li>2 tbsp. pine nuts or blanched almonds</li>
    <li>1/2 cup olive oil</li>
    <li>1/2 cup grated Parmesan cheese, plus 2 tbsp. for garnish.</li>
    <li>1/8 tsp salt</li>
    <li>1 pint cherry tomatoes</li>
    <li>1 tsp olive oil</li>
    </ul>
    <p class="variation">Variation: Got no time, or no fresh basil? Use a 6 ounce jar of prepared pesto instead.</p>
    </div>
    
    <div id="instructions" class="tabcontent">
    <h2>The Process</h2>
    <ol class="instructions">
    <li>Bring 4 quarts of water to a rolling boil in a large pot. Salt the water generously and add the pasta. </li>
    <li>While the pasta cooks, make the pesto.
    <ul>
    <li>Remove stems from basil leaves.</li>
    <li>Put the basil, garlic, and pine nuts or almonds into the bowl of a food processor and pulse it a few times to chop them up.</li>
    <li>Then, turn the food processor on and <strong>slowly</strong> pour the olive oil through the feeder tube to blend with the chopped herbs and nuts. </li>
    <li>Process until all ingredients are fully blended, stopping the food processor to scrape down the sides occasionally to get it all mixed. </li>
    <li>Turn off the food processor, and add the salt and Parmesean, then pulse a few times to blend.</li>
    </ul>
    </li>
    <li>Heat a large skillet over medium heat. </li>
    <li>Add the 1/2 tsp. olive oil to the heated skillet.</li>
    <li>Add the cherry tomatoes to the skillet and let them blister, stirring occasionally and gently so they don't burst. </li>
    <li>Remove tomatoes from the pan and set aside. </li>
    <li>Drain the pasta, reserving 1/4 cup of the cooking water.</li>
    <li>Return the pasta to the pot</li>
    <li>Add the reserved cooking water and pesto to the pasta and stir to mix</li>
    <li>Plate the pasta and add 6-8 tomatoes to each plate</li>
    <li>Garnish with reserved basil leaves and Parmesean and serve. Buon Appetito!</li>
    </ol>
    </div>
    </div>
    </div>
    </div>
    </section>
    
    </body>
</html>